﻿#include('../../header.html', {title: '发布公告'})
<body class="es-main-default es-nav-default " xmlns:v-bind="http://www.w3.org/1999/xhtml">
<div class="es-wrap">
  <div id="content-container" class="container">
    <div class="row row-3-9 my-layout">
      <div class="col-md-3">
        #include('../sideMenu.html', {user: 'tea', name : '发布公告'})
      </div>
      <div class="col-md-9">
        <div class="panel panel-default" role="my-teaching-course-sets">
          <div class="panel-heading">
      <span class="pull-right">
        <a id="create-course" href="#" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">
        <span class="es-icon es-icon-anonymous-iconfont"></span> 新增公告</a>
      </span>
            公告管理
          </div>
          <div class="panel-body" id="app">
            <table class="table table-striped" id="course-table" style="word-break:break-all;">
              <thead>
              <tr>
                <th width="20%">
                  公告内容
                </th>
                <th>所属课程</th>
                <th>发布时间</th>
                <th>结束时间</th>
                <th>状态</th>
                <th width="12%">操作</th>
              </tr>
              </thead>
              <tbody>
              <tr v-if="announcements.length <= 0">
                <td colspan="8" class="empty">暂无公告</td>
              </tr>
              <tr v-for="(announcement, index) in announcements">
                <td width="20%">
                  <a class="pull-left mrm link-primary announcement-content v-cloak"
                     @click="showAnn(announcement.id)" data-toggle="modal" data-target="#showNotice">
                    {{announcement.content}}
                  </a>
                </td>
                <td>
                  <a class="mr10 link-primary v-cloak" :href="'/course/'+announcement.course.id+'/info'">
                    {{announcement.course.name}}
                  </a>
                </td>
                <td class="v-cloak">{{announcement.startTime}}</td>
                <td class="v-cloak">{{announcement.endTime}}</td>
                <td v-html="getStatus(announcement)"> </td>
                <td style="padding-left: 5px">
                  <div class="btn-group">
                    <a href="javascript:void(0);" type="button" class="link-primary dropdown-toggle ml10"
                       data-toggle="dropdown">
                      更多
                      <i class="es-icon es-icon-arrowdropdown"></i>
                    </a>
                    <ul class="dropdown-menu pull-right" role="menu">
                      <li>
                        <a @click="deleteAnn(announcement.id, index)" href="#">
                          删除
                        </a>
                        <a @click="modifyAnn(index)" data-toggle="modal" data-target="#modifyNotice" href="#">
                          修改
                        </a>
                      </li>
                    </ul>
                  </div>
                </td>
              </tr>
              </tbody>
            </table>
            <nav class="text-center" v-if="page.totalPages>1">
              <navigation :pages="page.totalPages" :current.sync="page.pageNum" @navpage="gotoPage"/>
            </nav>

            <!--创建公告-->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                 aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                      &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                      新增公告
                    </h4>
                  </div>
                  <div class="modal-body">
                    <form id="announcement-create-form" class="form-horizontal" novalidate="novalidate" data-widget-cid="widget-0">
                      <div class="row form-group">
                        <div class="col-md-2 control-label">
                          <label for="course">所属课程</label>
                        </div>
                        <div class="col-md-8 controls" style="z-index:2000;">
                          <select id="course" class="form-control" v-model="courseId">
                            <option v-for="course in courses" v-bind:value="course.id">{{course.name}}</option>
                          </select>
                          <div class="help-block" style="display:none;"></div>
                        </div>
                      </div>
                      <div class="row form-group">
                        <div class="col-md-2 control-label">
                          <label for="tasks">所属任务</label>
                        </div>
                        <div class="col-md-8 controls" style="z-index:2000;">
                          <select id="tasks" class="form-control" v-model="taskId">
                            <option value="0">默认教学计划</option>
                            <option v-for="task in tasks" v-bind:value="task.id">{{task.name}}</option>
                          </select>
                          <div class="help-block" style="display:none;"></div>
                        </div>
                      </div>
                      <div class="row form-group">
                        <div class="col-md-2 control-label">
                          <label for="startTime">开始时间</label>
                        </div>
                        <div class="col-md-8 controls" style="z-index:2000;">
                          <input type="text" id="startTime" name="startTime" class="form-control"
                                 data-widget-cid="widget-1" data-explain="" autocomplete="off">
                          <div class="help-block" style="display:none;"></div>
                        </div>
                      </div>
                      <input type="hidden" id="url" name="url" class="form-control" value="">
                      <div class="row form-group">
                        <div class="col-md-2 control-label">
                          <label for="endTime">结束时间</label>
                        </div>
                        <div class="col-md-8 controls" style="z-index:2000;">
                          <input type="text" id="endTime" name="startTime" class="form-control"
                                 data-widget-cid="widget-1" data-explain="" autocomplete="off">
                          <div class="help-block" style="display:none;"></div>
                        </div>
                      </div>

                      <div class="row form-group">
                        <div class="col-md-2 control-label">
                          <label for="endTime">公告内容</label>
                        </div>
                        <div class="col-md-8 controls" style="z-index:2000;">
                          <textarea class="form-control" id="content" v-model="content">

                          </textarea>
                          <div class="help-block" style="display:none;"></div>
                        </div>
                      </div>
                      <div class="alert alert-info">
                        <strong>1.公告将显示在网站首页顶部导航上方</strong> <br> <strong>2.最多可显示3条最新的进行中的通告</strong>

                      </div>

                      <input type="hidden" name="_csrf_token" value="3Zk6tmz4-yyd995d9Xkjs3rJrd87trRvo9zOJIEaBPE">
                    </form>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" @click="publishAnn" class="btn btn-primary">
                      确定发布
                    </button>
                  </div>
                </div><!-- /.modal-content -->
              </div><!-- /.modal -->
            </div>
            <!--公告显示-->
            <div class="modal fade" id="showNotice" role="dialog" tabindex="-1" aria-labelledby="myModalLabel">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                      x
                    </button>
                    <h4 class="modal-title">公告</h4>
                  </div>
                  <div class="modal-body">
                    {{annContent.content}}
                  </div>
                  <div id="time" class="modal-footer">

                  </div>
                </div>

              </div>
            </div>
            <!--公告的修改-->
            <div class="modal fade" id="modifyNotice" role="dialog" tabindex="-1" aria-labelledby="myModalLabel">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                      &times;
                    </button>
                    <h4 class="modal-title">
                      修改公告
                    </h4>
                  </div>
                  <div class="modal-body">
                    <form id="announcement-modify-form" class="form-horizontal" novalidate="novalidate" data-widget-cid="widget-0">
                      <div class="row form-group">
                        <div class="col-md-2 control-label">
                          <label for="course">所属课程</label>
                        </div>
                        <div class="col-md-8 controls" style="z-index:2000;">
                          <select id="course-modify" class="form-control" v-model="modify_ann.course.id">
                            <option v-for="course in courses" v-bind:value="course.id">{{course.name}}</option>
                          </select>
                          <div class="help-block" style="display:none;"></div>
                        </div>
                      </div>
                      <div class="row form-group">
                        <div class="col-md-2 control-label">
                          <label for="tasks">所属任务</label>
                        </div>
                        <div class="col-md-8 controls" style="z-index:2000;">
                          <select id="tasks-modify" class="form-control" v-model="modify_ann.taskId">
                            <option value="0">默认教学计划</option>
                            <option v-for="task in tasks" v-bind:value="task.id">{{task.name}}</option>
                          </select>
                          <div class="help-block" style="display:none;"></div>
                        </div>
                      </div>
                      <div class="row form-group">
                        <div class="col-md-2 control-label">
                          <label for="startTime-modify">开始时间</label>
                        </div>
                        <div class="col-md-8 controls" style="z-index:2000;">
                          <input type="text" id="startTime-modify" name="startTime" class="form-control"
                                 data-widget-cid="widget-1" data-explain="" autocomplete="off" :value="modify_ann.startTime">
                          <div class="help-block" style="display:none;"></div>
                        </div>
                      </div>
                      <div class="row form-group">
                        <div class="col-md-2 control-label">
                          <label for="endTime-modify">结束时间</label>
                        </div>
                        <div class="col-md-8 controls" style="z-index:2000;">
                          <input type="text" id="endTime-modify" name="startTime" class="form-control"
                                 data-widget-cid="widget-1" data-explain="" autocomplete="off" :value="modify_ann.endTime">
                          <div class="help-block" style="display:none;"></div>
                        </div>
                      </div>

                      <div class="row form-group">
                        <div class="col-md-2 control-label">
                          <label for="endTime">公告内容</label>
                        </div>
                        <div class="col-md-8 controls" style="z-index:2000;">
                          <textarea class="form-control" id="content-modify" v-model="modify_ann.content">

                          </textarea>
                          <div class="help-block" style="display:none;"></div>
                        </div>
                      </div>

                      <input type="hidden" name="_csrf_token" value="3Zk6tmz4-yyd995d9Xkjs3rJrd87trRvo9zOJIEaBPE">
                    </form>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" @click="publishNewAnn" class="btn btn-primary">
                      确定修改
                    </button>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  $(function () {
    $('#myModal').on('show.bs.modal', function () {
      laydate.render({
        elem : '#startTime',
        type : 'datetime',
        value: new Date()
      });
    });
  });
  var infoVm = new Vue({
    el: '#app',
    data: {
      //公告
      announcements: [],
      //老师所有的课程
      courses: [],
      //所选中的课程
      courseId: '',
      content: '',
      //公告内容
      annContent: {
        content: ''
      },
      // 要修改的公告
      modify_ann: {
        course: {
          id: ''
        },
        startTime: '',
        endTime: '',
        taskId: '',
        content: ''
      },
      tasks: [],  //所有的任务
      taskId: 0,  //选中的任务id
      page: {
        pageNum: 1,
        totalPages: 1,
        limit: 10
      }
    },
    created: function () {
      $.ajax({
        type: 'post',
        url: '/course/api/protect/page',
        dataType: 'json',
        async: true,
        data: {status: 1},
        success: function (data) {
          infoVm.courses = data.payload.rows;
          infoVm.courseId = infoVm.courses[0].id;
        }
      });
    },
    mounted: function () {
      this.getPage();
    },
    watch: {
      courseId: function (newId) {
        $.ajax({
          type: 'post',
          data: {status: 1},
          url: '/course/task/api/' + newId + '/page',
          success: function (data) {
            if(data.success == false) {
              infoVm.tasks = [];
              infoVm.taskId = 0;
              return;
            }
            infoVm.tasks = data.payload.rows;
          }
        })
      },
      'modify_ann.course.id': function(newId) {
        $.ajax({
          type: 'post',
          data: {status: 1},
          url: '/course/task/api/' + newId + '/page',
          success: function (data) {
            if(data.success == false) {
              infoVm.tasks = [];
              infoVm.modify_ann.taskId = 0;
              return;
            }
            infoVm.tasks = data.payload.rows;
          }
        })
      },
      'page.pageNum': function (nv) {
        this.getPage();
      }
    },
    methods: {
      publishNewAnn: function () {
        var startTime = $('#startTime-modify')[0].value;
        var endTime = $('#endTime-modify')[0].value;
        $.post('/user/teacher/announcement/modifyAnn', {
          courseId: this.modify_ann.course.id,
          taskId: this.modify_ann.taskId,
          startTime: startTime,
          endTime: endTime,
          content: this.modify_ann.content,
          id: this.modify_ann.id
        }, function (data) {
          if(data.success) {
            layer.msg('修改成功!', {
              time: 2000
            });
            $('#modifyNotice').modal('hide');
          }
        });
        this.getPage();
      },
      modifyAnn: function (index) {
        infoVm.modify_ann = infoVm.announcements[index];
      },
      getPage: function () {
        var vm = this;
        $.post('/user/teacher/announcement/showAnn', {page: this.page.pageNum, size: 8}, function (data) {
          if(data.success) {
            vm.announcements = [];
            vm.announcements = data.payload.rows;
            vm.page.pageNum = data.payload.pageNum;
            vm.page.totalPages = data.payload.totalPages;
          }
        });
      },
      gotoPage: function (page) {
        this.page.pageNum = page;
      },
      getStatus: function (ann) {
        var startTime = new Date(Date.parse(ann.startTime.replace(/-/g, "/"))).getTime();
        var endTime = new Date(Date.parse(ann.endTime.replace(/-/g, "/"))).getTime();
        var nowTime = new Date().getTime();
        if (nowTime < startTime) {
          return '<span class="ann_status color-primary">尚未开始</span>';
        }else if (nowTime > startTime && nowTime < endTime) {
          return '<span class="ann_status color-info">正在进行</span>';
        }else {
          return '<span class="ann_status color-danger">已结束</span>';
        }
      },
      publishAnn: function () {
        var startTime = $("#startTime")[0].value;
        var endTime = $("#endTime")[0].value;
        var kid = parseInt(infoVm.courseId) || 0;
        console.log(kid);
        if (kid <= 0) {
          layer.msg('所属课程不能为空！', {icon: 5});
          return false;
        }
        if (startTime == "") {
          layer.msg('请填写结束时间!', {
            time: 2000
          });
          return false;
        }
        if (endTime == "") {
          layer.msg('请填写结束时间!', {
            time: 2000
          });
          return false;
        }
        if (startTime > endTime) {
          layer.msg('结束时间不应早于开始时间!', {
            time: 2000
          });
          return false;
        }
        if (infoVm.content == "") {
          layer.msg('请填写公告内容!', {
            time: 2000
          });
          $('#content').focus();
          return false;
        }
        var anns = this;
        $.ajax({
          type: 'post',
          url: '/user/teacher/announcement/publishAnn',
          dataType: 'json',
          data: {courseId: kid, taskId: infoVm.taskId, startTime: startTime, endTime: endTime, content: infoVm.content},
          success: function (data) {
            infoVm.content = '';
            $('#endTime')[0].value = '';
            $('#myModal').modal('hide');
            layer.msg('添加成功', {
              time: 2000
            });
            anns.announcements.push(data.payload.rows[0]);
            if(anns.announcements.length > anns.page.limit) {
              anns.getPage();
            }
          }
        });
      },
      showAnn: function (annId) {
        $.ajax({
          type: 'post',
          url: '/user/teacher/announcement/showAnnById',
          data: {id: annId},
          success: function (data) {
            infoVm.annContent = data.payload;
            var content = "公告发布于 " + data.payload.time;
            $('#time').html(content);
          }
        })
      },
      deleteAnn: function (annId, index) {
        var anns = this;
        if (confirm("确定要删除吗?")) {
          $.ajax({
            type: 'post',
            url: '/user/teacher/announcement/deleteAnn',
            data: {id: annId},
            success: function (data) {
              layer.msg('删除成功', {
                time: 2000
              });
              anns.announcements.splice(index, 1);
              if(anns.announcements.length < anns.page.limit) {
                anns.getPage();
              }
            }
          })
        }
      }
    },
  });
  laydate.render({
    elem : '#startTime',
    type : 'datetime',
    value: new Date()
  });
  laydate.render({
    elem : '#endTime',
    type : 'datetime'
  });
  laydate.render({
    elem : '#startTime-modify',
    type : 'datetime',
    value: new Date()
  });
  laydate.render({
    elem : '#endTime-modify',
    type : 'datetime'
  })
</script>

</body>

#include('../../footer.html')